<template>
  <!--导航栏-->
  <navbar />
  <!--加载等待图标-->
  <a-spin v-if="isLoading" class="loading-spinner" size="large" />
  <!--存档-->
  <section class="script-gallery">
    <h2>剧本</h2>
    <div class="script-gallery-grid">
      <script-card
          v-for="script in scripts"
          :key="script.id"
          :image="script.image"
          :author="script.author"
          :upload_time="script.upload_time"
          :title="script.title"
          :content="script.content"
          :tags="script.tags"
          :script_id="script.id"
          :user_id="user.id"
          @refresh="recentScripts"
      />
    </div>
  </section>
</template>

<script>

import ScriptCard from '@/components/Archive.vue';
import Navbar from '@/components/Navbar.vue';
import {
  getAllScriptsService, getRecentPlayedScriptsService
} from "@/api/script";
import {userInfoService} from "@/api/user";
import Conversation from "@/components/Conversation.vue";
import request from "@/utils/request";

export default {
  components: {
    ScriptCard,
    // image: String
    // upload_time: String
    // author: String
    // title: String
    // content: String
    // tags: String
    Conversation,
    Navbar
  },
  data() {
    return {
      user: {},          //当前登录用户
      scripts: [],      // 数据库中所有剧本
      scriptPage: 1,    // 当前剧本页
      scriptPageSize: 4,//一行4个
      recentlyPlayedScripts: [], //用户最近游玩剧本
      isLoading: false
    };
  },
  methods: {
    async recentScripts() {
      this.isLoading = true;
      console.log(this.user.id)
      try {
        this.recentlyPlayedScripts = (await getRecentPlayedScriptsService(this.user.id)).data
        console.log(this.recentlyPlayedScripts)
        if (this.recentlyPlayedScripts) {
          for (let script of this.recentlyPlayedScripts) {
            if (script.image) {
              try {
                // 使用 request 工具类请求头像
                const response = await request.get(script.image, {
                  responseType: "blob"
                });
                // 将 Blob 数据转换为 URL
                script.image = URL.createObjectURL(response);
              } catch (error) {
                console.error("Failed to load script image:", error);
              }
            }
          }
        }
      } finally {
        this.isLoading = false;  // 完成请求后隐藏加载图标
      }
    },
    async allScripts() {
      this.isLoading = true;
      try {
        const response = await getAllScriptsService();
        // console.log(response)
        this.scripts = response.data;
        // console.log(this.scripts[0].image)
        this.user = (await userInfoService()).data;
        // console.log(this.user.id)
        for (let script of this.scripts) {
          if (script.image) {
            try {
              // 使用 request 工具类请求头像
              const response = await request.get(script.image, {
                responseType: "blob"
              });
              // 将 Blob 数据转换为 URL
              script.image = URL.createObjectURL(response);
            } catch (error) {
              console.error("Failed to load script image:", error);
            }
          }
        }
        await this.recentScripts()
        // console.log(this.recentlyPlayedScripts[0].id)
        // console.log(this.recentlyPlayedScripts[0]);
        // console.log(this.scripts[0].image)
      } catch (error) {
        console.log('加载剧本失败');
        console.error('加载剧本时发生错误:', error);
      } finally {
        this.isLoading = false;
      }
    }
  },
  mounted() {
    this.allScripts();
  }
};
</script>

<style scoped>
section {
  border: 2px solid rgb(131, 129, 129);  /* 设置2px宽的实线灰色边框 */
}

h2 {
  text-align: left;
  font-size: 1.5rem;
  color: #444;
  margin-bottom: 20px;
}

.script-gallery {
  background-color: rgba(188, 188, 188);
  margin-top: 60px; /* 设置与导航栏之间的间距，防止内容被遮挡 */
  padding: 20px;
  color: #333; /* 修改字体颜色 */
}

.script-gallery-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}
</style>
